import styles from '@/pages/home/index.module.less';
import { Text, View } from 'ray';
import Strings from '@/i18n';
import React from 'react';
import  PopupPicker from '@/components/PopupPicker'


interface IProps {
  state: {
    gear: number;
    startHour: number;
    startMinute: number;
    endHour: number;
    endMinute: number;
    startTime: number;
    pauseTime: number;
  };
  dispatch: React.Dispatch<{ type: string; key?: string; value?: any }>;
  handleWork: (
    startHour: number,
    startMinute: number,
    endHour: number,
    endMinute: number,
    selectedDays: number[],
    startTime: number,
    pauseTime: number
  ) => void;
  selectedDays: number[];
}

// 步进
const step = 10;
const timeArr =[
  {
    values: Array.from({ length: 30 }, (_, i) => (i + 1) * step),
    unit: 'S',
  }
];
export default function GearCell({ state, dispatch, handleWork, selectedDays }: IProps) {

  return (
    <View className={styles.cell}>
      <View>
        <Text>{Strings.getLang('gear')}</Text>
      </View>
      <View className={styles.levelWrap}>
        <View className={styles.gearText} style={{ flexDirection: 'row', gap: 12 }}>
          <PopupPicker
            title={Strings.getLang('operate')}
            columns={timeArr.map(item=> {
              return {...item,activeIndex:item.values.indexOf(state.startTime)}
            })}
            onChange={(e: any) => {
              const startTime = e.detail.value[0];
              handleWork(
                state.startHour,
                state.startMinute,
                state.endHour,
                state.endMinute,
                selectedDays,
                startTime,
                state.pauseTime
              );
            }}
          >
            <Text>
              {Strings.getLang('operate')}&nbsp;
              {state.startTime} S
            </Text>
          </PopupPicker>
          <Text>-</Text>
          <PopupPicker
            title={Strings.getLang('pause')}
            columns={timeArr.map(item=> {
              return {...item,activeIndex:item.values.indexOf(state.pauseTime)}
            })}
            onChange={(e: any) => {
              const pauseTime = e.detail.value[0];
              handleWork(
                state.startHour,
                state.startMinute,
                state.endHour,
                state.endMinute,
                selectedDays,
                state.startTime,
                pauseTime
              );
            }}
          >
            <Text>
              {Strings.getLang('pause')}&nbsp;
              {state.pauseTime} S
            </Text>
          </PopupPicker>
        </View>
      </View>
    </View>
  );
}
